<template>
  <view class="container">

    <custom-nav title="" theme="blue" iconType="circle"></custom-nav>
    <view class="content">
      <template v-if="!isLoading">
        <scroll-view style="height: 100%" :scroll-y="true" :refresher-enabled="true" :refresher-isRefresh="isRefresh" refresher-background="transparent" :refresher-threshold="100"
          :scroll-with-animation="true" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @scrolltolower="onLower" :refresher-triggered="isRefresh">
          <view class="result-top">
            <view class="top-title">根据您的要求</view>
            <view class="top-text">精准搜索出 <text class="top-num">{{total}}</text> 位合适的亲家</view>
          </view>
          <template v-if="personList?.length">
            <!-- 资料卡片 -->
            <person-card v-for="(item, index) in personList" :key="index" :info="item">
              <template #footer>
                <view class="mask-lock" v-if="!isMember && index == personList.length-1">
                  <more-card mtype="member"></more-card>
                </view>
              </template>
            </person-card>
            <!-- 加载更多 -->
            <custom-load :status="loadStatus" v-if="isMember && personList?.length"></custom-load>

            <view class="result-tips" v-if="total < 3">
              <view>当前搜索资料较少，尝试扩大搜索范围</view>
              <custom-btn class="s-btn" @click="goBack">返回修改</custom-btn>
            </view>
          </template>
          <custom-empty v-else :emptyInfo="emptyInfo"></custom-empty>
        </scroll-view>
      </template>
    </view>

    <view class="result-bottom" v-if="!isMember">
      <view class="result-btn" @click="submitPay"><custom-btn>开通至尊会员 <text class="s-text">(查看<text class="s-all">全部</text>资料)</text> </custom-btn></view>
      <view class="result-vip" hover-class="hover-active" @click="toPurchase">查看至尊会员其他特权</view>
    </view>

  </view>
</template>

<script setup>
import PersonCard from "@/components/common/person-card.vue";
import MoreCard from "@/components/common/more-card.vue";

import { fetchSearchList } from "@/api";
import { getItem } from "@/utils/storage";

import useStore from "@/store";
const { app, person, common } = useStore();
// data
const isRefresh = ref(false);
const isLoading = ref(true);
const total = ref(0);
const loadStatus = ref("");
const personList = ref([]);
const filterQuery = reactive({
  page: 1,
  limit: 5,
});
const emptyInfo = reactive({
  title: "暂无符合搜索条件的用户",
});
const isMember = computed(() => {
  const info = getItem("user_info") || {};
  const { title } = info?.member || {};
  return title && title == "至尊会员";
});
const personData = computed(() => {
  return person.personListRes;
});

const onRestore = () => {
  uni.showToast({
    title: "刷新成功~",
    icon: "none",
  });
};
const goBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 页面下拉刷新
const onRefresh = () => {
  filterQuery.page = 1;
  isRefresh.value = true;
  getList(true);
};

// 向上滑动加载更多
const onLower = () => {
  if (!isMember.value) return;

  loadStatus.value = "loading";
  ++filterQuery.page;

  getList(false);
};

// 获取列表
const getList = async (refresh = true) => {
  try {
    const data = await person.getPersonList(filterQuery.page);
    const { page, list } = data;

    isRefresh.value = false;
    isLoading.value = false;

    total.value = page?.total;

    personList.value = refresh ? list : personList.value.concat(list);
    if (personList.value.length >= total.value) {
      loadStatus.value = "nomore";
    }
  } catch (error) {
    isRefresh.value = false;
    isLoading.value = false;
  }
};

// 立即支付
const submitPay = () => {
  const params = {
    member_id: 1,
  };
  app
    .surePayment(params)
    .then((res) => {
      uni.showToast({
        title: "开通成功!",
        icon: "none",
      });
    })
    .catch((err) => {});
};

// 查看特权
const toPurchase = () => {
  uni.navigateTo({ url: "/subPages/member/supreme" });
};
// 更新对应项解锁状态
const refreshFn = (id, look) => {
  personList.value.forEach((v) => {
    if (v.id == id) {
      v.look = look;
    }
  });
};

// 获取上一页路由 - 更新当前页数据
const refreshPage = () => {
  const lastPage = getItem("lastPage");
  if (lastPage) {
    // 详情页返回首页 - 更新收藏状态 + 更新解锁电话状态
    const { user_id, collect, look } = getItem("userIds") || {};
    if (user_id && lastPage.includes("details")) {
      personList.value.forEach((v) => {
        if (v.id == user_id) {
          v.collect = collect;
          v.look = look;
        }
      });
    }
    uni.removeStorageSync("lastPage");
  }
};

onShow(() => {
  refreshPage();
});

onLoad(() => {
  const { page, list } = personData.value;
  personList.value = list;
  total.value = page?.total;
  isLoading.value = false;

  // 创建激励视频广告
  common.initAdCase('search');
});

onUnload(() => {
  uni.removeStorageSync("searchParams");
});

provide("refreshFn", refreshFn);
</script>

<style lang=scss scoped>
@import "@/styles/global.scss";
.container {
  background: #f1f5fe;
}
.bg-empty {
  background: #f5f5f5;
}
.content {
  background: transparent;
  padding-bottom: 20rpx;
}

.result-top {
  padding: 50rpx;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
  .top-title {
    font-weight: bold;
    font-size: 72rpx;
    line-height: 80rpx;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #fffffa 0%, #ffe500 100%);
    background-clip: text;
    margin-bottom: 20rpx;
  }
  .top-text {
    color: #fff;
    font-weight: bold;
    font-size: 48rpx;
  }
  .top-num {
    color: #ffe73e;
  }
}

.result-bottom {
  padding: 40rpx 50rpx 60rpx;
  background: #fff;
  box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
  position: relative;
  .result-btn {
    width: 650rpx;
    height: 120rpx;
    line-height: 120rpx;
    font-weight: 800;
    font-size: 36rpx;
    color: #fff;
    background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
    box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(241, 55, 64, 0.25);
    border-radius: 120rpx;
  }

  .s-text {
    font-size: 28rpx;
    font-weight: normal;
  }
  .s-all {
    color: #ffe73e;
  }
  .result-vip {
    font-weight: 500;
    font-size: 28rpx;
    color: #999;
    text-align: center;
    text-decoration: underline;
    padding-top: 10rpx;
  }
}

.result-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #333;
  .s-btn {
    width: 400rpx;
    height: 100rpx;
    line-height: 100rpx;
    color: #ff5c55;
    margin: 20rpx auto 0;
    background: linear-gradient(180deg, #ffffff 0%, #ffefee 100%);
    border-radius: 120rpx;
    border: 1rpx solid #ff5c55;
  }
}
</style>